import React, { Component } from 'react'
import { hashHistory } from 'react-router'
import { Icon, InputItem, Toast, Modal } from 'antd-mobile'
import { createForm } from 'rc-form'
import { config, helper, myFetch } from '../utils'
import { RegisterForm, ForgotPasswordPage } from './'

class LoginForm extends Component {
  constructor() {
    super()
    this.login = this.login.bind(this)
    this.state = {
      registerModal: false,
      forgotModal: false,
    }
  }
  render() {
    const { form: { getFieldProps } } = this.props
    const { registerModal, forgotModal } = this.state
    return (
      <div>
        <InputItem
          className={`cm-input-item`}
          placeholder="请输入手机号码"
          type="phone"
          clear
          {...getFieldProps('phoneNumber', {
            initialValue: '',
          })}
        >
          <Icon type="phone" />
        </InputItem>

        <InputItem
          className={`cm-input-item`}
          placeholder="请输入密码"
          type="password"
          clear
          {...getFieldProps('password', {
            initialValue: '',
          })}
        >
          <Icon type="question" />
        </InputItem>

        <div
          className={`rt-forgot-password-box`}
        >
          <span className={`rt-icon-box`}>!</span>
          <span
            onClick={() => {
              this.setState({forgotModal: true})
            }}
          >
            忘记密码？
          </span>
        </div>

        <div
          className={`cm-main-button`}
          onClick={this.login}
        >
          登 录
        </div>
        <div
          className={`cm-main-button -diff-bg`}
          onClick={() => {
            this.setState({
              registerModal: true,
            })
          }}
        >
          注 册
        </div>
        {/*modal*/}
        <RegisterForm
          visible={registerModal}
          onClose={() => {
            this.setState({
              registerModal: false,
            })
          }}
        />
        <ForgotPasswordPage
          visible={forgotModal}
          onClose={() => {
            this.setState({
              forgotModal: false,
            })
          }}
        />
      </div>
    )
  }
  login() {
    const { form: { getFieldValue } } = this.props
    const phoneNumber = getFieldValue('phoneNumber')
    if (!phoneNumber) {
      Toast.fail('请填写手机号码', config.toastInterval)
      return
    }
    const password = getFieldValue('password')
    if (!password) {
      Toast.fail('请填写密码', config.toastInterval)
      return
    }
    const body = JSON.stringify({
      loginId: phoneNumber.replace(/\s/g, ''),
      hashedPassword: helper.aesEncrypt(password),
    })
    helper.loadingToast()
    myFetch(`/customers/account/login`, {body})
      .then(rs => {
        if (rs) {
          Toast.hide()
          localStorage.setItem('token', rs.Sid)
          if (rs.Customer) {
            localStorage.setItem('customerId', rs.Customer.LoginId)
          }
          Toast.success('登录成功', () => {
            hashHistory.push('/micro')
          })
        }
      })
  }
}

export default createForm()(LoginForm)